<script>
export default {
  data() {
    return {
      contentLoading: false,
      requestParamBind:{
        to: "",
        content: "",
        messageTypeCode:"",
      },
      requestParam: {
        data: {
          and: []
        },
        pageNumber: 1,
        pageSize: 100,
        sort: "gmtCreate",
        orderBy:"DESC"
      },
      bodyData: {
        content: [],
        number: 1,
        size: 5,
        totalElements: 1,
        totalPage: 1,
      },
      messageTypeCodeEnum: {
        notification: "通知",
        verification: "验证码",
        marketing: "营销推广",
        voice: "语音",
        logistics: "物流"
      }
    }
  },
  watch: {
    requestParamBind: {
      handler: function (val) {
        this.requestParam.data.and = [{
          field: "to",
          operatorCode: "vague",
          value: val.to
        }, {
          field: "content",
          operatorCode: "vague",
          value: val.content
        },{
          field: "messageTypeCode",
          operatorCode: "eq",
          value: val.messageTypeCode
        }];
      },
      deep: true
    }
  },
  mounted() {
    this.getBodyData();
  },
  methods: {
    /**
     * 获取消息类型名称
     * @param code
     * @returns {*}
     */
    getMessageTypeName(code) {
      return this.messageTypeCodeEnum[code];
    },
    changePageSize(val) {
      this.requestParam.pageSize = val;
      this.getBodyData();
    },
    changePageNumber(val) {
      this.requestParam.pageNumber = val;
      this.getBodyData();
    },
    getBodyData() {
      this.contentLoading = true;
      this.$kt.requestSecurity.send({
        uri: "/functional-sms-web/admin/sms/getBodyData",
        data: this.requestParam,
        stateSuccess: (res) => {
          this.bodyData = res.data;
          setTimeout(() => {
            this.contentLoading = false;
          }, 500);
        },
        stateFail: (err) => {
          this.$message.error(err.errMsg);
          setTimeout(() => {
            this.contentLoading = false;
          }, 500);
        }
      });
    }
  }
}

</script>

<template>
  <div class="box">
    <div style="text-align: left">
      <el-form
          :inline="true"
          :model="requestParamBind"
          label-position="left"
          @submit.native.prevent
      >
        <el-form-item label="类型">
          <el-select
              style="width: 150px"
              v-model="requestParamBind.messageTypeCode"
              @change="getBodyData"
              placeholder="请选择">
            <el-option
                label="全部"
                :value="''"
            ></el-option>
            <el-option
                v-for="(value, key) in messageTypeCodeEnum"
                :key="key"
                :label="value"
                :value="key">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input
              @keyup.enter.native="getBodyData"
              placeholder="请勿输入区号"
              v-model="requestParamBind.to"></el-input>
        </el-form-item>
        <el-form-item label="内容">
          <el-input
              @keyup.enter.native="getBodyData"
              v-model="requestParamBind.content"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
              type="primary"
              @click="getBodyData">查询/刷新
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-scrollbar
        v-loading="contentLoading"
        style="height: calc(100vh - 150px)">

      <div
          v-for="item in bodyData.content"
          class="box-box">
        <div class="card">
          <div style="text-align: left;padding-left: 5px;">
            <div class="dot"
            :class="{
              'dot-success':item.messageStatusCode==='success',
              'dot-sending':item.messageStatusCode==='sending',
              'dot-fail':item.messageStatusCode==='fail'
            }"
            ></div>
            <span
                v-if="item.messageStatusCode==='success'"
                class="text-success">成功</span>
            <span
              v-if="item.messageStatusCode==='sending'">
              发送中
            </span>
            <span
                v-if="item.messageStatusCode==='fail'"
                class="message-status-fail-reason">{{item.messageStatusFailReason}}</span>
          </div>
          <div style="padding: 0px 10px 0 10px;box-sizing: border-box;">
            <div class="small-text">ID：{{ item.id }}</div>
            <div style="height: 5px"></div>
            <div style="text-align: center;font-size: 18px">+{{ item.phoneAreaCode }} {{ item.to }}</div>
          </div>

          <div style="padding: 10px">

            <div>
          <textarea
              disabled
              class="box-content-text">{{item.content}}</textarea>
            </div>
            <div style="text-align: left">
              <span class="small-text">{{ $kt.date.format(item.gmtCreate, "yyyy-MM-dd hh:mm:ss") }}</span>
              <el-tag style="float: right">{{getMessageTypeName(item.messageTypeCode)}}</el-tag>
            </div>
          </div>
        </div>
      </div>
    </el-scrollbar>
    <div style="height: 15px"></div>

    <!-- 分页 -->
    <el-pagination
        style="margin-left: 50%;transform: translateX(-50%)"
        :page-size="requestParam.pageSize"
        :current-page="requestParam.pageNumber"
        :page-sizes="[100, 200, 300, 400, 500,10000]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="bodyData.totalElements"
        @size-change="changePageSize"
        @current-change="changePageNumber"/>

  </div>

</template>

<style lang="scss" scoped>
.box {
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
}

.box-box {
  display: inline-block;
  margin: 20px;
  width: 300px;
}

.card {
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, .1);
}

.box-content-text {
  width: 100%;
  height: 100px;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 5px;
}

.small-text {
  font-size: 12px;
  color: rgba(0, 0, 0, .5);
}

.dot{
  width: 10px;
  height: 10px;
  background-color: #409EFF;
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
  margin-top: 5px;
}

.dot-success{
  background-color: #67C23A;
}

.dot-sending{
  background-color: #666666;
}

.dot-fail{
  background-color: #F56C6C;
}

.text-success{
  font-size: 12px;
  color: #67C23A;
}

.text-fail{
  font-size: 12px;
  color: #F56C6C;
}

.message-status-fail-reason{
  font-size: 12px;
  color: #F56C6C;
}

</style>